import {messages} from "share/common";
import React, { Component } from "react"
import { Modal, Button, message, Spin } from 'antd'
import { openModal, removeContainer } from "components/method/openModal"
import httpFetch from "share/httpFetch"
import 'styles/components/mul-modal.scss'
import ApproveHistory from "components/template/approve-history"

class AmortizationHistory extends Component {

  state = {
    history: [],
    loading: false
  };

  componentDidMount() {
    const { expenseAmortizationId } = this.props;
    this.setState({ loading: true });
    httpFetch.get(`/api/expense/amortization/history/query`, { expenseAmortizationId }).then(res => {
      this.setState({ history: res.data });
    }).catch(e => {
      message.error(e.response.data.message);
    }).finally(() => {
      this.setState({ loading: false });
    })
  }

  render() {
    const { visible, onCancel, afterClose } = this.props;
    const { loading, history } = this.state;
    return (
      <Modal
        title={messages('finance-8.key12')/*摊销历史*/}
        visible={visible}
        onCancel={onCancel}
        afterClose={afterClose}
        width={760}
        footer={[
          <Button onClick={onCancel}>{messages('common.cancel')/*取消*/}</Button>
        ]}
        className={`mul-modal`}
      >
        <div className={'mul-modal-flex'}>
          <div className={'mul-modal-content'}>
            {loading ? (
              <Spin />
            ) : (
              <ApproveHistory
                style={{width: '100%', margin: '5px'}}
                approvalHistory={history}
              />
            )}
          </div>
        </div>
      </Modal>
    )
  }

}

AmortizationHistory.open = function(env, props) {
  let container;
  const targetProps = {
    ...props,
    visible: true,
    onCancel: () => close(),
    afterClose: () => {
      removeContainer(container);
      container = null;
    }
  };
  function close() {
    let closeModal = () => openModal(AmortizationHistory, {
      ...targetProps,
      visible: false
    }, env, container);
    closeModal();
  }
  container = openModal(AmortizationHistory, targetProps, env);
};

export default AmortizationHistory
